<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="所属用户:" prop="user_id">
                    <SelectPage v-model="form.user_id" :url="'/admin/user/selectPage'" show_field="nickname" show_id="uid" query_field="uid" :multiple="false" />
                </el-form-item>
                <el-form-item label="所属宝宝:" prop="baby_id">
                    <SelectPage v-model="form.baby_id" :url="'/admin/sq.user_event/selectPage'" show_field="name"
                                show_id="id" query_field="id" :multiple="false" />
                </el-form-item>
                <el-form-item label="类型:" prop="type">
                    <el-select v-model="form.type" placeholder="请选择类型" clearable>
                        <el-option v-for="(item, index) in type" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="心情内容:" prop="content">
                    <el-input v-model="form.content" placeholder="请输入心情内容" clearable />
                </el-form-item>
                <el-form-item label="图片和视频:" prop="pic_urls">
                    <div class="image-list">
                        <div class="image-row" v-for="(el, idx) in imageList" :key="idx">
                            <img :src="el"  v-if="!el.includes('.mp4')">
                            <video :src="el" controls v-else></video>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="发生时间:" prop="hap_date">
                    <el-date-picker v-model="form.hap_date" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择发生时间" />
                </el-form-item>
                <el-form-item label="标签:" prop="tags">
                    <el-input v-model="form.tags" placeholder="请输入标签" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {},
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
            type:[
               { label: "图片", value: 1 },
               { label: "视频", value: 2 },
               { label: "文字", value: 3 },
               { label: "大事记", value: 4 },
            ],
        }
    },
    computed: {
        imageList() {
            return this.form.pic_urls ? this.form.pic_urls.split(",") : []
        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>
<style scoped lang="scss">
.image-list{
    .image-row{
        display: inline-block;
        vertical-align: middle;
        border-radius: 8px;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 10px;
        width: 180px;
        height: 180px;
        img,
        video{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
</style>
